<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟</title>
		<style>
			html,body{overflow: hidden;height: 100%;margin: 0;
			}
			
			@media screen and (min-width:500px) and (max-width:1366px){
			#myCanvas{position: absolute;width: 639px;height: 109px;left: 50%;top: 50%;
			margin-top: -64px;margin-left: -318px;}
			}
			@media screen and (min-width:1366px){
				body{background-color: #2C3E50;background-image: linear-gradient(125deg,#E4FFCD,#6dd5ed,#2193b0,#E4FFCD);  background-size: 400%;
  animation: bganimation 15s infinite;}
				#myCanvas{position: absolute;width: 1278px;height: 218px;left: 50%;top: 50%;
				margin-top: -109px;margin-left: -639px;color: white;}
				@keyframes bganimation {
				  0%{
				    background-position: 0% 50%;
				  }
				  50%{
				    background-position: 100% 50%;
				  }
				  100%{
				    background-position: 0% 50%;
				  }
				}
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas"></canvas>
		<script type="text/javascript" src="time.js"></script>
	
	</body>
</html>
